<template>
	<n-form ref="formRef" :model="formValue" :rules="rules">
		<div>
			<div class="text-t-1">
				<div>
					<div class="text-base">{{ $t('miniGames.activeClientSeed') }}</div>
					<div
						class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center justify-between text-t-2">
						<span class="text-t-4 text-[14px] overflow-text__hidden max-w-[420px]">
							{{ data?.playerSeed }}
						</span>
						<base-copy class="text-base" :value="data?.playerSeed"></base-copy>
					</div>
				</div>
				<div class="mt-[10px]">
					<div class="text-base">{{ $t('miniGames.activeServerSeedHashed') }}</div>
					<div
						class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center justify-between text-t-2">
						<span class="text-t-4 text-[14px] overflow-text__hidden max-w-[420px]">
							{{ data?.serverSeedHash }}
						</span>
						<base-copy class="text-base" :value="data?.serverSeedHash"></base-copy>
					</div>
				</div>
				<div class="mt-[10px]">
					<div class="text-base">{{ $t('miniGames.totalBetsMadeWithPair') }}</div>
					<div
						class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center justify-between text-t-2">
						<span class="text-t-4 text-[14px] overflow-text__hidden max-w-[420px]">
							{{ data?.nonce }}
						</span>
						<!-- <base-copy class="text-base" :value="data?.nonce"></base-copy> -->
					</div>
				</div>
			</div>
		</div>
		<div class="text-t-1">
			<div class="h-[20px] my-[20px] text-base">
				<BaseIcon style="color: #96a5aa" name="rotate" :size="20" />
				{{ $t('miniGames.rotateSeedPair') }}
			</div>
			<div>
				<div class="flex justify-between mt-1">
					<n-form-item
						class="text-base w-[100%]"
						path="send"
						:label="$t('miniGames.newClientSeed')">
						<n-input
							class="bg-[#131A27] h-[40px]"
							placeholder=""
							v-model:value="formValue.send"
							autosize
							style="flex: auto"
							:maxlength="64" />
						<base-button
							class="min-w-[83px] h-[40px] ml-2"
							type="primary"
							:round="false"
							:loading="loading"
							:block="false"
							@click="editSend">
							{{ $t('miniGames.change') }}
						</base-button>
					</n-form-item>
				</div>
			</div>
			<div class="mt-[10px]">
				<div class="text-base">{{ $t('miniGames.nextServerSeed') }}</div>
				<div
					class="bg-[#131A27] rounded-md h-[40px] mt-1 px-[12px] flex items-center justify-between text-t-2">
					<span class="text-t-4 overflow-text__hidden max-w-[420px]">
						{{ data?.nextServerSeedHash }}
					</span>
					<base-copy class="text-base" :value="data?.nextServerSeedHash"></base-copy>
				</div>
			</div>
		</div>
	</n-form>
</template>

<script lang="ts" setup>
import { BaseCopy, BaseButton, BaseIcon } from '@/components/base'
import { message } from '@/utils'
import { NInput, NForm, NFormItem } from 'naive-ui'
import type { FormInst, FormRules } from 'naive-ui'
import { ref, reactive } from 'vue'
import { seedRevise } from '@/api/third/mini-games'
import { generateFormattedString } from '@/views/games/util'

defineProps({
	data: {
		type: Object
	}
})
const emit = defineEmits(['update'])
const formRef = ref<FormInst | null>(null)
const loading = ref<boolean>(false)
const formValue = reactive({
	send: generateFormattedString(10)
})
const rules: FormRules = {
	send: [
		{
			required: true,
			type: 'string',
			trigger: ['input', 'blur'],
			message: '必填字段不能为空'
		}
	]
}
const editSend = (e: MouseEvent) => {
	e.preventDefault()
	formRef.value?.validate(async (errors) => {
		if (!errors) {
			loading.value = true
			const res = await seedRevise({ seed: formValue.send })
				.finally(() => {
					loading.value = false
				})
				.catch((err) => {
					message.error(err?.msg, { duration: 5000 })
				})
			if (res?.code === 200) {
				emit('update')
				message.success('成功更改当前种子', { duration: 5000 })
				formValue.send = generateFormattedString(10)
			}
		} else {
			console.log(errors)
		}
	})
}
</script>

<style lang="scss" scoped>
.overflow-text__hidden {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
:deep(.n-form-item .n-form-item-label) {
	padding-bottom: 0;
	line-height: 18px;
	height: 18px;
}
:deep(.n-form-item .n-form-item-feedback-wrapper) {
	min-height: 0;
}
:deep(.n-form-item .n-form-item-label__text) {
	font-size: 14px;
}
</style>
